<template>
    <div class="other-top-head head-fixed" style="box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px">
        <div class="navbar-wrap">
            <div class="new-nav-page list-scroll-white " style="width: 100%;">
                <headerCon></headerCon>
            </div>
        </div>
    </div>
    <div class="details-content" v-infinite-scroll="load" infinite-scroll-distance="100" :infinite-scroll-disabled="disabled"  style="overflow: auto;">
        <div class="wrap-breadcrumb">
            <div class="main-experimental">
                <div class="main-details clearfix main-details-ab2">
                    <div class="thumbs-images">
                        <div class="divbanner">
                            <el-carousel height="622px" indicator-position="none"
                                :arrow="productList.banner_count > 1 ? 'hover' : 'never'">
                                <el-carousel-item v-for="(item, index) in productList.banner_path" :key="index">
                                    <img :src="item" class="bannerimg" />
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                    <div class="detail-right detail-right-ab2">
                        <div class="material-info model-limit-height">
                            <div class="title-material clearfix">
                                <h1 class="model-name" :title="productList.title">
                                    {{ productList.title || "" }}
                                </h1>
                                <div class="copy-text">
                                    ID
                                    <em>{{ productList.product_ids }}</em>
                                    <span class="copy" @click="copyClick(productList.product_ids)">复制</span>
                                    <span class="upload-time">{{ productList.yearDate }}</span>
                                </div>
                                <span class="optin-item star" @click="collectClick(productList.id)"
                                    :class="productList.is_collect ? 'collect-active' : ''">
                                    <el-icon size="18">
                                        <component is="StarFilled"></component>
                                    </el-icon>
                                    <em>{{ productList.is_collect ? '已收藏' : '收藏' }}</em>
                                </span>
                            </div>
                            <div class="item-material-content topTitle">
                                <div class="title_sub" v-for="(value, index) in productList.project_config"
                                    :key="index">
                                    <span>{{ value.key }}</span>
                                    <span>{{ value.value }}</span>
                                </div>
                            </div>
                            <div style="padding: 0 0 30px 0;">
                                <div class="btn_line"></div>
                                <div v-if="productList.is_sf == 1">
                                    <p class="p_page">
                                        <span>价格：</span>
                                        <span>{{ productList.price || 0 }} KM币 </span>
                                    </p>
                                    <div class="ptj">
                                        <div style="display: inline-block">
                                            <div class="i_title">官方补贴价：</div>
                                            <div class="ptjg"><span>{{ productList.gf_price || 0 }}</span>KM币</div>
                                        </div>
                                        <div class="vipTitle">
                                            <div class="ootitle">
                                                <div class="psize">VIP专享价</div>
                                                <div class="ppzs">
                                                    <span>{{ productList.vip_price || 0 }}</span>KM币
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="btn_line"></div>
                                </div>
                                <div>
                                    <div class="btn">
                                        <div class="btntitle">立即下载</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 更多模型推荐 -->
            <recomm :recommendList="recommendList"></recomm>
            <div style="text-align: center;" v-if="loading">加载中...</div>
            <div style="text-align: center;" v-if="noMore">没有更多了</div>
        </div>
    </div>
    <login></login>
    <footerContent></footerContent>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import headerCon from "../../components/header.vue";
import login from "../../components/login.vue";
import { decrypt, DEFAULTKEY } from "../../utils/keyEnum";
import { useRoute } from "vue-router";
import { productDetail, productCare } from "../../api/home/index";
import useClipboard from 'vue-clipboard3'
import { ElMessage } from 'element-plus';
import { productRecommend } from '../../api/product/index'
import recomm from '../../components/recommend.vue'
import footerContent from "../../components/footerContent.vue";
const route = useRoute();
const queryValue = computed(() => {
    return decrypt(route.query.value || "", DEFAULTKEY);
});
const product_id = queryValue.value.product_id
    ? queryValue.value.product_id
    : 0;

const productTotal = ref(0);
const page = ref(1);
const limit = ref(10);
const loading = ref(false);
const noMore = computed(() => (page.value * limit.value) > productTotal.value);
const disabled = computed(() => loading.value || noMore.value)

//下拉加载
const load = () => {
   loading.value = true
  setTimeout(() => {
    page.value++;
    productRecommendList()
    loading.value = false;
  }, 2000);

};
//获取详情
const productList = ref<any>([]);
productDetail({ id: product_id }).then((res) => {
    if (res.code == 1) {
        productList.value = res.data.list;
    }
});
//复制按钮
const { toClipboard } = useClipboard()
const copyClick = async (ids: string) => {
    try {
        await toClipboard(ids)
        ElMessage.success("已成功复制模型ID！可粘贴搜索查看!")
    } catch (e) {
        ElMessage.error("复制失败" + e)
    }
}
//收藏
const collectClick = (id: Number) => {
    productCare({ id: id }).then(res => {
        if (res.code == 1) {
            productList.value.is_collect = !productList.value.is_collect
            ElMessage.success(productList.value.is_collect ? '收藏成功' : '取消收藏成功')
        }
    })
}

const recommendList = ref<any>([]);
const productRecommendList = () => {
    productRecommend({ page: page.value, limit: limit.value }).then((res) => {
        if (res.code == 1) {
            productTotal.value = Number(res.data.total);
            if (res.data.list.length > 0) {
                recommendList.value = [...recommendList.value, ...res.data.list];
            }
        }
    })
}
onMounted(() => {
    productRecommendList()
})

</script>
<style>
@import url("../../assets/css/detail.css");

.title_sub {
    line-height: 20px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.title_sub span {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.btn_line {
    border-color: #eee;
    border-top: 1px dashed #eee;
    margin: 18px auto 18px 0;
    margin-top: 23px;
    margin-bottom: 24px;
}

.p_page {
    color: #999;
    font-size: 14px;
    width: 352px;
    cursor: default;
    text-decoration: line-through;
}

.ptj {
    color: #333;
    /* width: 352px; */
    cursor: default;
    margin: 12px 0 13px;
}

.i_title {
    font-size: 14px;
    color: #999;
    text-align: center;
    margin-top: 0;
    font-weight: 400;
    display: inline-block;
}

.ptjg {
    font-size: 12px;
    text-align: center;
    margin-top: 0;
    display: inline-block;
    color: #cb0018;
}

.ptjg span {
    font-size: 24px;
    font-family: DIN Alternate-Bold, DIN Alternate;
    font-weight: 700;
    color: #cb0018;
    margin-right: 4px;
}

.vipTitle {
    display: inline-block;
    background: none;
    width: fit-content;
    height: 22px;
    margin-left: 0;
    float: right;
}

.ootitle {
    display: inline-block;
    margin-top: 0;
    vertical-align: bottom;
    height: 22px;
    font-size: 14px;
    color: #faad14;
    font-weight: 700;
    text-align: center;
}

.psize {
    margin-right: 14px;
    display: inline-block;
    padding: 2px;
    width: 75px;
    height: 22px;
    color: #ffe375;
    font-size: 13px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 22px;
    background: #222;
    border-radius: 4px;
}

.ppzs {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333;
    text-align: center;
    display: inline-block;
    margin-top: 0;
}

.ppzs span {
    font-size: 24px;
    font-family: DIN Alternate-Bold, DIN Alternate;
    font-weight: 700;
    color: #333;
    margin-right: 4px;
    cursor: auto;
}

.btn {
    background: #d92332;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}

.btntitle {
    font-size: 18px;
    line-height: 48px;
    color: #fff;
}

.topTitle {
    height: 250px;
    overflow: hidden;
    margin-top: 24px;
}

.bannerimg {
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.divbanner {
    text-align: center;
    height: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.sgav {
    width: 362px;
    height: 208px;
    top: 24px;
    left: 24px;
    position: relative;
}
</style>
